-
-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: expose complete stateStore
as a slot prop
#38
Feat: expose complete stateStore
as a slot prop
#38
Conversation
🦋 Changeset detectedLatest commit: 5bb899f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you wouldn't mind updating the README for this change as well, just so others know it's out there!
@@ -86,13 +86,13 @@ | |||
</script> | |||
|
|||
{#if asChild} | |||
<slot {root} label={{ attrs: labelAttrs }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should move these into a reactive slotProps
prop, so something like:
<script lang="ts">
$: slotProps = {
root,
label: { attrs: labelAttrs },
stateStore,
state: $stateStore,
}
</script>
If we're going to pass stores as slot props I think they should be suffixed with Store
and then we can also pass the value of the store as the state
prop.
@huntabyte On it 👌 |
This component also exposes two additional slot props for `state` (the current reactive value of the command state) and `stateStore` (the underlying writable state store). These can be used to implement more advanced use cases, such as debouncing the search updates with the `stateStore.updateState` method: | ||
|
||
```svelte | ||
<Command.Root {state} let:stateStore> | ||
{@const handleUpdateState = debounce(stateStore.updateState, 200)} | ||
<CustomCommandInput {handleUpdateState} /> | ||
</Command.Root> | ||
``` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tried to keep it relatively brief, as I don't imagine it will be super commonly used. Also writing this very late at night so please proof-read and edit as you please 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
Expose state store as a solution to debouncing search updates with the
updateState
methodCloses #37